<div id="add" (click)="showAdd()">
  <i nz-icon nzType="plus" nzTheme="outline"></i>
</div>
<div
  id="dels"
  [ngStyle]="{ 'background-color': condition.state ? '#686b6e' : '#1890ff' }"
>
  <i
    nz-icon
    nzType="border"
    nzTheme="outline"
    *ngIf="!condition.state"
    (click)="getupOrDown(1)"
  ></i>
  <i
    nz-icon
    nzType="delete"
    nzTheme="outline"
    *ngIf="condition.state"
    (click)="getupOrDown(0)"
  ></i>
</div>
<div id="search">
  <nz-input-group [nzSuffix]="suffixIconSearch">
    <input
      type="text"
      nz-input
      placeholder="请输入关键字"
      [(ngModel)]="condition.keywords"
      (keydown)="searchDown($event)"
    />
  </nz-input-group>
  <ng-template #suffixIconSearch>
    <i nz-icon nzType="search"></i>
  </ng-template>
</div>
<div id="tableBox" style="user-select: none">
  <nz-table
    #basicTable
    [nzData]="listOfData"
    [nzSize]="'small'"
    [nzPageSize]="condition.pageSize"
    [nzFrontPagination]="false"
    [nzTotal]="total"
    [(nzPageIndex)]="condition.pageNum"
    (nzPageIndexChange)="getList()"
  >
    <thead>
      <tr>
        <th>商品名</th>
        <th>库存</th>
        <th>单位</th>
        <!-- <th>操作</th> -->
      </tr>
    </thead>
    <tbody>
      <tr
        *ngFor="let data of basicTable.data"
        (contextmenu)="data.show = true"
        nz-popover
        [nzPopoverContent]="contentTemplate"
        [(nzPopoverVisible)]="data.show && data.state"
        (click)="detail(data)"
      >
        <td>{{ data.commodity_name }}</td>
        <td>{{ data.num }}</td>
        <td>{{ data.unit }}</td>
        <!-- <td class="dd">
          <span>入库</span>
          <br />
          <span>出库</span>
        </td> -->
        <ng-template #contentTemplate>
          <ul class="dd">
            <li>
              <span (click)="clickMe(data, 'out')">出库</span>
            </li>
            <li>
              <span (click)="clickMe(data, 'in')">入库</span>
            </li>
          </ul>
        </ng-template>
      </tr>
    </tbody>
  </nz-table>
</div>

<div class="outWindow" *ngIf="showOutWindow">
  <h3>出售{{ outforms.commodity_name }}</h3>
  <div id="inpuBox">
    <span class="keys"> 售出单价： </span>
    <input
      nz-input
      [(ngModel)]="outforms.price"
      (blur)="onBlur($event, 'price', 'outforms')"
    />

    <span class="keys"> 售出数量：(库存:{{ outforms.reserve }}) </span>
    <input
      nz-input
      [(ngModel)]="outforms.num"
      type="number"
      (ngModelChange)="ngNumChange($event)"
    />

    <span class="keys"> 售出总价： </span>
    <input nz-input type="number" [(ngModel)]="outforms.count_price" />
    <span class="keys"> 顾客名称： </span>

    <input nz-input [(ngModel)]="outforms.customer" />

    <button
      nz-button
      nzType="primary"
      id="btn_close"
      nzDanger
      style="margin-left: 0"
      (click)="this.showOutWindow = false"
    >
      取消
    </button>
    <button
      nz-button
      nzType="primary"
      id="btn"
      (click)="addOut()"
      style="margin-left: 15%; margin-right: 0"
    >
      确认
    </button>
  </div>
</div>

<div class="outWindow" *ngIf="showInWindow">
  <h3>进货{{ informs.commodity_name }}</h3>
  <div id="inpuBox">
    <span class="keys"> 进货单价： </span>
    <input
      nz-input
      type="number"
      [(ngModel)]="informs.in_price"
      (blur)="onBlur($event, 'in_price', 'informs')"
    />

    <span class="keys"> 进货数量： </span>
    <input
      nz-input
      [(ngModel)]="informs.in_num"
      type="number"
      (ngModelChange)="ngNumChange($event, 'informs')"
    />

    <span class="keys"> 进货总价： </span>
    <input nz-input [(ngModel)]="informs.payment" />
    <span class="keys"> 经手人： </span>

    <input nz-input [(ngModel)]="informs.dealer" />

    <button
      nz-button
      nzType="primary"
      id="btn_close"
      nzDanger
      style="margin-left: 0"
      (click)="this.showInWindow = false"
    >
      取消
    </button>
    <button
      nz-button
      nzType="primary"
      id="btn"
      style="margin-left: 15%; margin-right: 0"
      (click)="addIn()"
    >
      确认
    </button>
  </div>
</div>
